<template>
	<view class="content">
		<view class="backGround" :style="{background: `url(${imgaeUrl('/static/bg.png')})`}">
			<view v-bind:style="{height: (s+n) +'px'}" class="position-fixed width-100"
				style="top: 0; overflow: hidden; z-index: 9999;">
				<view class="backGround" :style="{background: `url(${imgaeUrl('/static/bg.png')})`}">
					<view v-bind:style="{height: s+'px' }" />
					<view v-bind:style="{height: n+'px' }" class="display-flex center align-items">
						<view v-bind:style="{height: h+'px' }" style="width: 690rpx;"
							class=" display-flex space-between align-items">
							<!-- <view class="margin-top-05">
								<uv-icon name="arrow-left" color="#333333" size="20"></uv-icon>
							</view> -->
							<view style="width: 20px;" class="margin-top-05">

							</view>
							<!-- <view class="font-size-32 font-weight-500">
								我的团队
							</view> -->
							<view class="title-tabs display-flex align-items center">
								<view @tap="activeIndextabs(1)" :class="activeIndex == 1?'button':''"
									:style="activeIndex == 1?'color:#FFFFFF;':'color: #7C7C7C;'"
									class="  font-size-22 display-flex align-items center"
									style="width: 160rpx;height: 56rpx;">
									我的订单
								</view>
								<view @tap="activeIndextabs(2)" :class="activeIndex == 2?'button':''"
									:style="activeIndex == 2?'color:#FFFFFF;':'color: #7C7C7C;'"
									class=" font-size-22 display-flex align-items center"
									style="width: 160rpx;height: 56rpx;">
									团队订单
								</view>
							</view>
							<view style="width: 20px;" class="margin-top-05">

							</view>
						</view>
					</view>
				</view>
			</view>
			<view :style="{height: (s+n) +'px'}">
			</view>
			<view class="padding-about-24 margin-top-20">
				<view class="balance-section" :style="{background: `url(${imgaeUrl('/static/home/tdbg.png')})`}">
					<view class="">
						<uv-tabs :list="timetabslist" @click="timetabs" lineWidth="15" lineColor="#FFFFFF" :activeStyle="{
									color: '#FFFFFF',
									transform: 'scale(1.05)',
									fontSize:'26rpx'
						    	}" :inactiveStyle="{
									color: 'rgba(250,250,250,0.5)',
									transform: 'scale(1)',
									fontSize:'26rpx'
								}" itemStyle="padding: 0 18px; height: 34px;"></uv-tabs>
					</view>
					<view class="display-flex flex-direction-column margin-top-30 center align-items">
						<view class="font-size-22 color-FFF">
							销售额
						</view>
						<text class=" font-size-54 color-FFF font-weight-bold">{{orderinfo.salf_price}}</text>
					</view>
					<view style="padding:0 48rpx;" class="display-flex margin-top-20 space-between ">
						<view class="display-flex flex-direction-column  center align-items">
							<text class=" font-size-36 color-FFF font-weight-bold">{{orderinfo.income}}</text>
							<view class="font-size-24 color-FFF">
								佣金 (¥)
							</view>
						</view>
						<view class="display-flex flex-direction-column  center align-items">
							<text class=" font-size-36 color-FFF font-weight-bold">{{orderinfo.num}}</text>
							<view class="font-size-24 color-FFF">
								订单数量
							</view>
						</view>
					</view>
					<view class="padding-about-24 margin-top-30 display-flex space-between align-items">
						<view class="display-flex align-items">
							<uv-icon color="#FFFFFF" name="info-circle"></uv-icon>
							<view class="font-size-24 margin-left-10 color-FFF">
								确认收货15天后结算佣金
							</view>
						</view>
						<view @click="navigateTo('/pages/Mine/Withdrawal/Withdrawal')"
							class=" botton color-FFF center-size-20">
							去提现
						</view>
					</view>
				</view>
				<view @click="datetimePicker.open()" class="display-flex margin-top-30 align-items">
					<view class="font-size-28 margin-right-10 font-weight-500">
						{{date}}
					</view>
					<uv-icon name="arrow-down-fill" size="13"></uv-icon>
				</view>
				<view class="">
					<uv-tabs :list="tabslist" @click="tabs" lineWidth="15"
						lineColor="linear-gradient( 270deg, #FE6740 0%, #FE8B1D 100%)" :activeStyle="{
								color: '#262626',
								fontWeight: '500',
								transform: 'scale(1.05)',
								fontSize:'28rpx'
					    	}" :inactiveStyle="{
								color: '#7C7C7C',
								transform: 'scale(1)',
								fontSize:'28rpx'
							}" itemStyle="padding:0 25px; height: 34px;"></uv-tabs>
				</view>
				<view class="">
					<view v-if="list.length == 0"
						class="display-flex flex-direction-column center align-items margin-top-120">
						<image :src="imgaeUrl('/static/home/kong.png')" style="width: 232rpx;height: 232rpx;"
							mode="widthFix">
						</image>
						<view class="font-size-28 margin-top-05 color-999">
							暂无订单！
						</view>
					</view>
					<view v-for="item,index in list" :key="index" class="view margin-top-20">
						<view class="display-flex space-between align-items">
							<view class="display-flex">
								<view class="font-size-24 font-weight-500">
									订单号: {{item.order_sn}}
								</view>
								<view @tap="setClipboardData(item.order_sn)" class="label margin-left-10 center-size-20"
									style="color: #FE7335;">
									复制
								</view>
							</view>
							<view class="font-size-24" style="color: #FE7335;">
								{{item.type_text}}
							</view>
						</view>
						<view class="margin-top-20" style="border-top: 1rpx solid #F5F5F5;"></view>
						<view class="display-flex margin-top-20 align-items">
							<image :src="item.images" style="width: 80rpx;height: 80rpx;" class="border-radius-12"
								mode="aspectFill"></image>
							<view class="file-1 margin-left-20">
								<view class="font-size-28 webkit-line-clamp"
								 @click="navigateTo('/pages/Home/goodsDetails/goodsDetails?id=' + item.product_id)"
								 style="-webkit-line-clamp: 2;" >
									{{item.goods_name}}
								</view>
							<!-- 	<view class="display-flex space-between margin-top-10">
									<view style="#7C7C7C" class="font-size-22">
										<text>佣金比例：</text>
										<text style="color: #FE7335;">{{item.rate}}%</text>
									</view>
									<view style="#7C7C7C" class="font-size-22">
										<text>我的返佣：</text>
										<text style="color: #FE7335;">{{item.my_rate}}%</text>
									</view>
								</view> -->
							</view>
						</view>
						<view style="padding:0 48rpx;" class="display-flex margin-top-30 space-between ">
							<view class="display-flex flex-direction-column  center align-items">
								<text class=" font-size-36 font-weight-bold">{{item.salf_price}}</text>
								<view style="#7C7C7C" class="font-size-22">
									<text>支付金额(¥)</text>
								</view>
							</view>
							<view class="display-flex flex-direction-column  center align-items">
								<text class=" font-size-36 font-weight-bold">{{item.my_income}}</text>
								<view style="#7C7C7C" class="font-size-22">
									<text>预估收益(¥)</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<div class="kong"></div>
				<div class="kong"></div>
				<div class="kong safe-area-inset-bottom"></div>
			</view>

		</view>

		<uv-datetime-picker ref="datetimePicker" v-model="value" mode="year-month" :maxDate="Date.now()"
			@confirm="confirm">
		</uv-datetime-picker>
		<u-tabbar :current="2"></u-tabbar>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		imgaeUrl,
		nativeUI,
		navigateTo,
		navigateBack,
		setClipboardData,
		timestampToDate
	} from '@/utils/index.js';
	import * as api from '@/request/app.js'; // 引入api 方法
	import local from '@/utils/localStorage.js'; //引入本地存储方法
	const date = ref(timestampToDate(Date.now(), 'Y-m'))
	const datetimePicker = ref(null)
	const s = ref(getApp().globalData.s); //计算高度
	const n = ref(getApp().globalData.n); //计算胶囊
	const h = ref(getApp().globalData.h); //计算胶囊
	const tabslist = ref([{
		name: '全部',
		type: 0
	}, {
		name: '待结算',
		type: 20
	}, {
		name: '已结算',
		type: 100
	}, {
		name: '已取消',
		type: 200
	}])
	const tabsIndex = ref(0)
	const activeIndex = ref(1)
	const timetabslist = ref([{
		name: '全部',
		type: 0
	}, {
		name: '今天',
		type: 1
	}, {
		name: '昨日',
		type: 2
	}, {
		name: '本月',
		type: 3
	}, {
		name: '上月',
		type: 4
	}, {
		name: '本年',
		type: 5
	}])
	const timeIndex = ref(0)
	const pagingState = ref(false)
	const page = ref(1)
	const list = ref([]) //订单
	const orderinfo = ref({})
	onLoad(function(option) {
		getOrderData()
		getOrderlists()
	});

	onShow(function() {});

	function timetabs(event) {
		console.log(event);
		timeIndex.value = event.type
		getOrderData()
	}

	function confirm(event) {
		console.log(event);
		date.value = timestampToDate(event.value, 'Y-m')
		pagingState.value = false
		page.value = 1
		list.value = []
		getOrderlists()
	}

	function tabs(event) {
		console.log(event.type);
		tabsIndex.value = event.type
		pagingState.value = false
		page.value = 1
		list.value = []
		getOrderlists()
	}

	function activeIndextabs(index) {
		activeIndex.value = index
		pagingState.value = false
		page.value = 1
		list.value = []
		getOrderlists()
	}
	/** 获取热门视频*/
	async function getOrderlists() {
		let object = {
			type: activeIndex.value,
			page: page.value,
			limit: '10',
			is_settled: tabsIndex.value,
			time: date.value
		}
		if (!pagingState.value) {
			const {
				code,
				data
			} = await api.getOrderlists(object)
			list.value = list.value.concat(data.data)
			if (!data.has_more) {
				pagingState.value = true
				return
			}
			page.value++
		}
	}
	async function getOrderData() {
		let object = {
			type: timeIndex.value
		}
		const {
			code,
			data
		} = await api.getOrderData(object)
		if (code == 0) {
			orderinfo.value = data
		}
	}
	onReady(function() {});
	onReachBottom(function() {
		getOrderlists()
	});
</script>

<style scoped lang="scss">
	.label {
		width: 68rpx;
		height: 36rpx;
		background: #F5F4F4;
		border-radius: 8rpx;
	}

	.center-size-20 {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
	}

	.botton {
		width: 148rpx;
		height: 56rpx;
		background: rgba(250, 250, 250, 0.26);
		border-radius: 28rpx;
	}

	.balance-section {
		width: 702rpx;
		height: 426rpx;
		background-size: 100% 100% !important;
		background-repeat: no-repeat;
	}

	.view {
		padding: 24rpx;
		background: #FFFFFF;
		// box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.title-tabs {
		width: 324rpx;
		height: 64rpx;
		background: #FFFFFF;
		border-radius: 36rpx;
	}

	.backGround {
		width: 750rpx;
		height: 452rpx;
		background-size: 100% 100% !important;
		background-repeat: no-repeat;
	}
</style>